<template>
  <!-- 
    联想词
      1:定义接口api
      2:导入api
      3:点击搜索调用api
      4:获取数据存储并渲染

     防抖：
         倒计时执行一个事件，如果倒计时过程中再次请求执行该事件，清理上一次倒计时，再重新倒计时执行
     节流： 
         倒计时执行一个事件，如果倒计时过程中再次请求执行该事件，直接不理

      持久化
         1：值修改了存储到浏览器
         2：初始值读取浏览器存储
 -->
  <div class="search">
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.push('/layout/home')"
    ></van-nav-bar>
    <van-search
      v-model.trim="value"
      @input="fn"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click="toResult">搜索</div>
      </template>
    </van-search>
    <!-- 联想词 -->
    <van-cell-group v-if="value !== ''">
      <van-cell
        @click="cellClick(item)"
        v-for="(item, index) in list"
        :key="index"
        icon="search"
      >
        <template #title>
          <div v-html="replaceFn(item, value)"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>
      <van-cell :title="item" v-for="(item, index) in historyList" :key="index">
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { suggestion } from '@/api/search'
export default {
  data () {
    return {
      value: '',
      list: [],
      interval: -1,
      isLoading: false,
      historyList: JSON.parse(localStorage.getItem('historyList')) || []
      // xxx: '<span style="color:red">1</span>0<span style="color:red">1</span>'
    }
  },
  filters: {},
  methods: {
    // 防抖方法
    fn () {
      clearTimeout(this.interval)
      this.interval = setTimeout(() => {
        this.search()
      }, 500)
    },
    // 节流方法
    fn2 () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      setTimeout(() => {
        this.search()
        this.isLoading = false
      }, 500)
    },
    // 联想词搜索
    async search () {
      this.list = []
      if (this.value !== '') {
        const res = await suggestion({
          q: this.value
        })
        if (res.data.options[0] === null) {
          this.list = []
        } else {
          this.list = res.data.options
        }
        console.log('联想词列表', res)
      }
    },
    // 文本替换
    // str:需要替换文本  str2:关键字
    replaceFn (str, str2) {
      const reg = new RegExp(str2, 'ig')
      return str.replace(reg, `<span style="color:red">${str2}</span>`)
    },
    // 搜索点击
    toResult () {
      if (this.value !== '') {
        // 添加到历史记录
        if (this.historyList.includes(this.value)) {
          // 存在就删除
          const _index = this.historyList.indexOf(this.value)
          this.historyList.splice(_index, 1)
        }
        this.historyList.unshift(this.value)
        localStorage.setItem('historyList', JSON.stringify(this.historyList))

        // if (!this.historyList.includes(this.value)) {
        //   // 不存在处理
        //   this.historyList.unshift(this.value)
        //   localStorage.setItem('historyList', JSON.stringify(this.historyList))
        // } else {
        //   // 存在
        //   // 先删除
        //   const _index = this.historyList.indexOf(this.value)
        //   this.historyList.splice(_index, 1)
        //   // 增加
        //   this.historyList.unshift(this.value)
        //   localStorage.setItem('historyList', JSON.stringify(this.historyList))
        // }
        this.$router.push('/result/' + this.value)
      }
    },
    // 搜索联想词点击
    cellClick (str) {
      this.$router.push('/result/' + str)
    }
  }
}
</script>
<style></style>
